<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <b>一个b标签</b>
    </div>
  </body>
</html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  // $('tag'|dom元素) 创建元素（jquery元素）
  let p = $('<p class="name" id="pp">一个朴树无华的p标签</p>');

  //   添加子元素
  //append 追加到容器中
  $(".container").append(p);
  //prepend 追加到某个节点前面
  //   将a标签添加到b标签前面
  $("b").prepend("<a href=“#”>一个a标签</a>");

  //添加兄弟元素
  // before 给当前元素前面添加一个兄弟元素
  $(".container").before($('<input type="text" value="123"/>'));
  //after 给当前元素后面添加一个兄弟元素
  $(".container").after($('<input type="password" value="123"/>'));
  //replaceWith 替换元素
  $("b").replaceWith("一段纯文本");
  //clone(true,false) 克隆元素  默认深度克隆
  //参数1：是否克隆父节点的事件 参数2：是否克隆子节点的事件
  let p2 = p.clone();
  $(".container").append(p2);
  //empty 删除所有的子节点
  $(".container").empty();
  //remove 删除自己
  $(".container").remove();
</script>
